<template>
  <div ref="hotPicPassenger" class="hot-pic-passenger">
    <!-- <query-type :typeContent="typeContent" @typeQuery="typeOrder"></query-type> -->
    <div class="map-box">
      <map-pic
        ref="map"
        style="width:100%;height:auto;height:5.5rem;"
        @mapDataQuery="reuqest"/>
    </div>
    <div :class="isfixedClass" class="query-box">
      <div class="select-order">
        <query-city-select
          :obj="selectCity"
          :widths="selectCityWidth"
          :default-name="defaultCity"
          :tab-name="tabName"
          :time-type="timeType"
          :select-url="selectCityUrl"
          :select-style="selectStyleCity"
          @selectData="cityReuqest"/>
        <query-city-select
          v-show="isLeafCity"
          ref="selectOperator"
          :obj="selectOperator"
          :widths="'1.2rem'"
          :default-name="defaultOperator"
          :tab-name="operatorName"
          :time-type="timeType"
          :select-style="selectStyleOperator"
          :select-url="selectOperatorUrl"
          @selectData="operatorReuqest"/>
        <query-select
          :obj="selectType"
          :select-content="typeContent"
          :widths="'.8rem'"
          :default-value="defaultType"
          :select-style="selectStyleType"
          @selectData="typeOrder"/>
        <query-select
          ref="selectItem"
          :obj="selectItems"
          :select-content="content"
          :widths="'1rem'"
          :default-value="defaultType"
          :select-style="selectStyleItem"
          @selectData="queryOrder"/>
      </div>
      <query-calendar
        v-show="isShowCalendar"
        :lunar="true"
        :range-date="rangeDate"
        class="query-calendar"
        @confirmDate="confirmQuery"/>
      <query-date
        ref="queryDateDom"
        :isfix="isfix"
        :date1="date1"
        @queryTimeData="queryTimeData"/>
      <change-select
        v-show="isShowChangeSelect"
        ref="changeSelectDom"
        :isfix="isfix"
        :select-data="changeSelectData"
        :change-num="changeNum"
        @changeSelect="changeSelect"/>
    </div>
    <total-count v-if="isRunningWater" ref="totalDom" :obj-data="totalObj"/>
    <common-total-count v-else ref="commonTotalDom" :obj-data="totalObj"/>
    <div class="include">
      <pie-map
        v-show="isShowPie"
        ref="pieDom"
        :obj="obj"
        :pie-title="pieTitle"
        :formatter="formatter"
        :data-source="showDatas"
        :title="pieTitle"/>
      <pie-map
        v-show="isShowAreaPie"
        ref="areaPieDom"
        :obj="areaPie"
        :pie-title="areaPieTitle"
        :formatter="formatter"
        :data-source="areaPieDomShowData"
        :title="areaPieTitle" />
      <bar-pic
        v-show="isShowBar"
        ref="barDom"
        :obj="passengerBar"
        :unit="barUnit"
        :is-sum="false"
        :is-more="isMore"
        @showMore="cityShowMore"/>
      <common-list v-show="isShowList" :data-source="listData" :is-show-icon="isShowIcon" :title="commonListTitle" :table-title ="commonlistTableTitle" @toDetailPage="toDetail" @toListPage="toListPage"/>
      <bar-pic
        v-show="isShowStateBar"
        ref="stateBarDom"
        :obj="stateBar"
        :unit="barUnit"
        :is-sum="false"/>
      <bar-pic
        v-show="isShowCountBar"
        ref="countBarDom"
        :obj="countBar"
        :is-sum="false"/>
      <pie-map
        v-show="isShowTypePie"
        ref="typePieDom"
        :obj="typePieObj"
        :title="typePieTitle"
        :formatter="formatter"
        :data-source="objShowDatas"/>
      <pie-map
        v-show="isShowSourcePie"
        ref="sourcePieDom"
        :obj="sourcePieObj"
        :title="sourcePieTitle"
        :formatter="formatter"
        :data-source="sourcePieDomShowDatas"/>
      <bar-pic
        v-show="isShowTimeBar"
        ref="timeBarDom"
        :obj="timeBar"
        :y-name="timeBarYName"
        :is-sum="false"/>
      <hot-pic-line
        v-show="isShowLine"
        ref="lineDom"
        :dom-obj="hotPicLine"
        :unit="lineUnit"/>
      <hot-pic-bar
        v-show="isShowLine"
        ref="vBarDom"
        :dom-obj="hotPicVBar"
        :unit="lineUnit"/>
    </div>
    <show-more v-show="isShowMore" ref="shoeMoreBox" :left-val="leftVal" :more-title="moreTitle" @closeShowMore="closeShowMore"/>
    <list-page v-show="isShowListPage" :left-val="leftList" :title="listTitle" :url="listUrl" @closeList="closeList"/>
    <list-detail v-show="isShowlistDetail" :left-val="left" :detail-data="detailData" :title="detailTitle" @closeDetail="closeDetail"/>
    <mask-loading
      v-show="isShowMask"
      :msg="msg"
      :num="num"
      :width="width"/>
  </div>
</template>
<script>
import BarPic from '@/components/bar/bar'
import HotPicBar from '@/components/bar/verticalBar'
import HotPicLine from '@/components/line/line'
import hotPicQueryTime from '@/components/hotPicQueryTime/hotPicQueryTime'
import queryDate from '@/components/queryDate/queryDate'
import queryType from '@/components/queryType/queryType'
import pieMap from '@/components/pie/pie'
import MapPic from '@/components/map/map'
import common from '@/assets/js/common.js'
import maskLoading from '@/components/mask/mask'
import queryCalendar from '@/components/date/rangeDate'
import querySelect from '@/components/select/select'
import queryCitySelect from '@/components/citySelect/citySelect'
import commonTotalCount from '@/components/CommonTotalCount/CommonTotalCount'
import totalCount from '@/components/TotalCount/TotalCount'
import showMore from '@/components/showMore/showMore'
import listPage from '@/components/List/List'
import commonList from '@/components/CommonList/CommonList'
import listDetail from '@/components/ListDetail/ListDetail'
import changeSelect from '@/components/changeSelect/changeSelect'
import qs from 'qs'
export default {
  components: {
    BarPic,
    HotPicLine,
    hotPicQueryTime,
    MapPic,
    queryDate,
    pieMap,
    HotPicBar,
    maskLoading,
    queryCalendar,
    queryType,
    querySelect,
    queryCitySelect,
    totalCount,
    commonTotalCount,
    showMore,
    listPage,
    listDetail,
    changeSelect,
    commonList
  },
  data () {
    return {
      obj: 'hotPicPassengerPie',
      passengerBar: 'passengerBar',
      hotPicLine: 'hotPicLine',
      hotPicVBar: 'hotPicVBar',
      selectType: 'selectType',
      selectItems: 'selectItems',
      selectCity: 'selectCity',
      selectOperator: 'selectOperator',
      stateBar: 'stateBar',
      typePieObj: 'typePieObj',
      countBar: 'countBar',
      sourcePieObj: 'sourcePieObj',
      timeBar: 'timeBar',
      areaPie: 'areaPie',
      passengerList: 'passengerList',
      barTitle: '', // 横向柱状图title
      pieTitle: '', // 饼图title
      vBarTitle: '', // 纵向柱状图title
      lineTitle: '', // 折线图title
      stateBarTitle: '', // 状态柱状图title
      typePieTitle: '', // 类型饼图title
      sourcePieTitle: '', // 来源饼图title
      areaPieTitle: '', // 区域分块饼图title
      moreTitle: '',
      formatter: '',
      unit: '',
      lineUnit: '', // 线图title单位
      detailType: 5,
      barUnit: '个',
      timeBarYName: '单位：点',
      content: [{ name: '订单', value: 0 }, { name: '流水', value: 1 }],
      typeContent: [{ name: '订单', value: 0 }, { name: '运力', value: 1 }, { name: '乘客', value: 2 }, { name: '促销', value: 3 }],
      changeSelectData: [{name: '重庆=万州', value: 0}, { name: '重庆—万州', value: 1 }, { name: '万州—重庆', value: 2 }],
      codes: '',
      differentiate: 1, // 乘客数，下单活跃度、车辆、司机、线路、运营商、订单等维度
      heatType: 1, // 1乘客，2、运力 3、订单
      timeType: 1, // 1、昨日 2、近7天 3、近30天 4、近90天 5、全部
      defaultType: 0,
      lineDirection: -1,
      changeNum: 0,
      changeSelectType: '',
      areaName: '',
      userType: '',
      roleType: 1,
      barMoreDataType: '',
      clickNum: '0',
      date1: '昨日',
      msg: '加载中...',
      typeOrderNum: 0,
      num: 1,
      startDate: '',
      endDate: '',
      rangeDate: '',
      width: '13%',
      tabName: [],
      operatorName: [],
      defaultCity: '',
      defaultOperator: '',
      isfixedClass: '',
      leftTitle: '',
      rightTitle: '',
      allLeftTitle: '',
      allRightTitle: '',
      allAmount: 0,
      selectCityWidth: '3rem',
      selectStyleCity: {
        left: 0,
        width: '6.79rem'
      },
      selectStyleOperator: {
        left: '-1.8rem',
        width: '6.79rem'
      },
      selectStyleType: {
        left: '-3.82rem',
        width: '6.79rem'
      },
      selectStyleItem: {
        left: '-5.26rem',
        width: '6.79rem'
      },
      ciytbackValue: {},
      selectCityUrl: '/navigation/getBiRegions',
      selectOperatorUrl: '/navigation/getBiRegions',
      isLeafCity: false,
      isRunningWater: false,
      isShowAreaPie: false,
      isShowPie: true,
      isShowStateBar: true,
      isShowTypePie: true,
      isShowCountBar: false,
      isShowSourcePie: false,
      isShowTimeBar: false,
      isShowLine: true,
      isShowMask: false,
      isShowCalendar: true,
      isShowMore: true,
      isMore: false,
      isShowChangeSelect: false,
      isShowBar: true,
      isShowList: true,
      isShowlistDetail: true,
      isShowListPage: true,
      url: '/memberShipHeat/countAndActive', // 默认乘客-乘客数请求url,
      listUrl: '',
      isfix: false,
      totalObj: {},
      showDatas: [],
      areaPieDomShowData: [],
      objShowDatas: [],
      sourcePieDomShowDatas: [],
      listData: [],
      detailData: [],
      isShowIcon: true,
      left: '100%',
      leftList: '100%',
      leftVal: '100%',
      listTitle: {title: '昨日 渝BK523426（往返）订单流水', name: '订单号', value: '订单金额 （元）'},
      detailTitle: '',
      commonListTitle: '',
      commonlistTableTitle: {name: '姓名', value: '车牌号'}
    }
  },
  mounted () {
    this.init()
    document.getElementById('app').addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    document.getElementById('app').removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 切换乘客、运力、订单
    typeOrder (num) {
      this.isRunningWater = false
      this.isShowTimeBar = false
      if (num === 2) {
        // 乘客
        this.url = '/memberShipHeat/countAndMemberShip'
        this.content = [ { name: '乘客', value: 0 }, { name: '活跃度', value: 1 } ]
        this.heatType = 1
        this.detailType = 0
        this.barUnit = '个'
        this.isShowStateBar = false
      } else if (num === 1) {
        // 运力
        this.url = '/turnover/getCar'
        this.heatType = 2
        this.detailType = 1
        this.changeRoleType()
        this.barUnit = '辆'
        this.isShowStateBar = true
      } else if (num === 0) {
        // 订单
        this.url = '/orderHeat/countAndOrder'
        this.content = [
          { name: '订单', value: 0 },
          { name: '流水', value: 1 }
        ]
        this.heatType = 3
        this.detailType = 5
        this.barUnit = '个'
        this.isShowStateBar = true
        this.isShowTimeBar = true
      } else {
        this.url = '/couponHeat/countAndCoupon'
        this.content = [
          { name: '促销', value: 0 }
        ]
        this.heatType = 4
        this.detailType = 6
        this.barUnit = '元'
      }
      this.differentiate = 1
      this.$nextTick(() => {
        this.$refs.selectItem.defaultSelect()
      })
      this.hotPicFn(this.timeType)
    },
    // 切换查询乘客、下单活跃度、车辆、司机、线路、运营商、订单、流水、优惠券
    queryOrder (num) {
      this.isRunningWater = false
      this.isShowTimeBar = false
      if (this.heatType === 1) {
        if (num === 0) {
          this.url = '/memberShipHeat/countAndMemberShip'
          this.barUnit = '个'
          this.differentiate = 1
          this.detailType = 0
        } else if (num === 1) {
          this.url = '/memberShipHeat/countAndActive'
          this.barUnit = '个'
          this.differentiate = 2
          this.detailType = 5
        }
      } else if (this.heatType === 2) {
        if (num === 0) {
          this.barUnit = '辆'
          this.url = '/turnover/getCar'
          this.differentiate = 1
          this.detailType = 1
        } else if (num === 1) {
          this.barUnit = '个'
          this.url = '/turnover/getDriver'
          this.differentiate = 2
          this.detailType = 2
        } else if (num === 2) {
          this.barUnit = '条'
          this.url = '/turnover/getLine'
          this.differentiate = 3
          this.detailType = 3
        } else if (num === 3) {
          this.barUnit = '个'
          this.url = '/turnover/getOrg'
          this.differentiate = 4
          this.detailType = 4
        }
      } else if (this.heatType === 3) {
        this.detailType = 5
        if (num === 0) {
          this.url = '/orderHeat/countAndOrder'
          this.differentiate = 1
          this.barUnit = '个'
          this.isShowTimeBar = true
        } else if (num === 1) {
          this.url = '/orderHeat/countAndTurnover'
          this.differentiate = 2
          this.barUnit = '元'
          this.isRunningWater = true
        }
      } else if (this.heatType === 4) {
        this.url = '/couponHeat/countAndCoupon'
        this.differentiate = 1
        this.barUnit = '元'
        this.detailType = 6
      }
      this.hotPicFn(this.timeType)
    },
    // 切换查询时间范围
    queryTimeData (num) {
      // type  Integer    1、当天   2、前一周   3、前一月   4、前一季度

      if (num === 0) {
        this.hotPicFn(1)
        this.clickNum = '0'
      } else if (num === 1) {
        this.hotPicFn(2)

        this.clickNum = '1'
      } else if (num === 2) {
        this.hotPicFn(3)

        this.clickNum = '2'
      } else if (num === 3) {
        this.hotPicFn(4)
        this.clickNum = '3'
      }

      this.startDate = ''
      this.endDate = ''
      this.rangeDate = ''
    },
    // 切换查询往返类型
    changeSelect (item) {
      this.areaName = item.name
      this.lineDirection = item.value
      this.hotPicFn(this.timeType)
    },
    // 调用后台请求公共方法
    hotPicFn (type) {
      if (this.heatType === 2 && type === 1) {
        type = 5
      } else if (type === 5) {
        type = 1
      }
      this.timeType = type
      this.formatter = '{b}\n{c}' + this.barUnit + '\n{d}%'
      this.reuqest(type)
    },
    // 切换不同的title提示
    changeTitle () {
      let linType = ''
      let pieType = ''
      let barType = ''
      let vBarType = ''
      let stateBarType = ''
      let typePieType = ''
      let sourcePieType = ''
      let countBarType = ''
      let timeBarType = ''
      let areaPieType = ''
      let totalType = ''
      let listType = ''
      this.isShowStateBar = false
      this.isShowTypePie = false
      this.isShowCountBar = false
      this.isShowSourcePie = false
      this.isShowTimeBar = false
      if (this.heatType === 1) {
        this.isShowSourcePie = true
        if (this.differentiate === 1) {
          this.commonlistTableTitle = {name: '订单号', value: '金额（元）'}
          this.isShowStateBar = true
          totalType = '注册乘客数'
          linType = '注册乘客数趋势'
          barType = '注册乘客数前列排名'
          pieType = '注册乘客数对比'
          areaPieType = '注册乘客数占比'
          vBarType = '注册乘客量'
          stateBarType = '注册乘客数状态'
          sourcePieType = '注册乘客下单来源占比'
          listType = '注册乘客详情'
          listType = '注册乘客详情'
        } else if (this.differentiate === 2) {
          totalType = '下单活跃度'
          linType = '下单活跃度趋势'
          barType = '下单活跃度前列排名'
          pieType = '下单活跃度对比'
          areaPieType = '下单活跃度占比'
          vBarType = '下单活跃度量'
          sourcePieType = '下单活跃度来源占比'
          listType = '下单活跃度详情'
          this.commonlistTableTitle = {name: '订单号', value: '金额（元）'}
        }
      } else if (this.heatType === 2) {
        if (this.differentiate === 1) {
          totalType = '车辆数'
          linType = '车辆数趋势'
          barType = '车辆数前列排名'
          pieType = '车辆数对比'
          areaPieType = '车辆数占比'
          vBarType = '车辆量'
          stateBarType = '车辆数状态'
          listType = '车辆数详情'
          this.commonlistTableTitle = {name: '订单号', value: '金额（元）'}
          this.isShowStateBar = true
        } else if (this.differentiate === 2) {
          totalType = '注册司机数'
          linType = '注册司机数趋势'
          barType = '注册司机数前列排名'
          pieType = '注册司机数对比'
          areaPieType = '注册司机数占比'
          vBarType = '注册司机量'
          stateBarType = '注册司机数状态'
          listType = '注册司机详情'
          this.commonlistTableTitle = {name: '司机姓名', value: '车牌号'}
          this.isShowStateBar = true
        } else if (this.differentiate === 3) {
          totalType = '线路数'
          linType = '线路数趋势'
          barType = '线路数前列排名'
          pieType = '线路数对比'
          areaPieType = '线路数占比'
          vBarType = '线路量'
          stateBarType = '线路数状态'
          listType = '线路数详情'
          this.commonlistTableTitle = {name: '线路名称', value: '最低配单人数'}
          this.isShowStateBar = true
        } else if (this.differentiate === 4) {
          totalType = '运营商数'
          linType = '运营商数趋势'
          barType = '运营商数前列排名'
          pieType = '运营商数对比'
          areaPieType = '运营商数占比'
          vBarType = '运营商量'
        }
      } else if (this.heatType === 3) {
        this.isShowStateBar = true
        if (this.differentiate === 1) {
          this.isShowTypePie = true
          this.isShowTimeBar = true
          totalType = '订单数'
          linType = '订单数趋势'
          barType = '订单数前列排名'
          pieType = '订单数对比'
          areaPieType = '订单数占比'
          vBarType = '订单数量'
          stateBarType = '订单状态'
          typePieType = '订单有、无责取消占比'
          timeBarType = '时间段订单数'
          listType = '订单数详情'
          this.commonlistTableTitle = {name: '订单号', value: '金额（元）'}
        } else if (this.differentiate === 2) {
          totalType = '订单流水'
          linType = '订单流水趋势'
          barType = '订单流水前列排名'
          pieType = '订单流水对比'
          areaPieType = '订单流水占比'
          vBarType = '订单流水量'
          stateBarType = '订单流水付款方式'
          typePieType = '订单流水类型占比'
          listType = '订单流水详情'
          this.commonlistTableTitle = {name: '订单号', value: '金额（元）'}
        }
      } else if (this.heatType === 4) {
        this.isShowStateBar = true
        this.isShowCountBar = true
        totalType = '促销费'
        linType = '促销费趋势'
        barType = '促销费前列排名'
        pieType = '促销费对比'
        areaPieType = '促销费占比'
        vBarType = '促销费量'
        stateBarType = '促销费形式'
        countBarType = '促销费使用张数'
        listType = '促销费详情'
        this.commonlistTableTitle = {name: '订单号', value: '促销费'}
      }
      let typeObj = {
        linType,
        barType,
        pieType,
        vBarType,
        stateBarType,
        typePieType,
        sourcePieType,
        countBarType,
        timeBarType,
        areaPieType,
        totalType,
        listType
      }
      if (this.timeType === 2) {
        this.changeTitlePack(
          this,
          '近7天',
          typeObj
        )
      } else if (this.timeType === 3) {
        this.changeTitlePack(
          this,
          '近30天',
          typeObj
        )
      } else if (this.timeType === 4) {
        this.changeTitlePack(
          this,
          '近90天',
          typeObj
        )
      } else if (this.timeType === 1 || this.timeType === 5) {
        this.changeTitlePack(
          this,
          '昨日',
          typeObj
        )
      } else {
        this.changeTitlePack(
          this,
          '',
          typeObj
        )
      }
      // this.$refs.queryDateDom.changeTitle(this.barTitle)
    },
    // 切换不同时间的title
    changeTitlePack (that, date, typeObj) {
      if (date === '昨日') {
        that.lineTitle = '近7天' + that.areaName + typeObj.linType
        that.vBarTitle = '近7天' + that.areaName + typeObj.vBarType
      } else {
        that.lineTitle = date + that.areaName + typeObj.linType
        that.vBarTitle = date + that.areaName + typeObj.vBarType
      }
      that.leftTitle = date + that.areaName + typeObj.totalType
      that.allLeftTitle = that.areaName + '总' + typeObj.totalType
      that.allRightTitle = that.areaName + '总应收'
      that.rightTitle = date + that.areaName + '应收'
      that.barTitle = date + that.areaName + typeObj.barType
      that.stateBarTitle = date + that.areaName + typeObj.stateBarType
      that.countBarTitle = date + that.areaName + typeObj.countBarType
      that.timeBarTitle = date + that.areaName + typeObj.timeBarType
      that.typePieTitle = date + that.areaName + typeObj.typePieType
      that.sourcePieTitle = date + that.areaName + typeObj.sourcePieType
      that.areaPieTitle = date + that.areaName + typeObj.areaPieType
      that.pieTitle = date + that.areaName + typeObj.pieType
      that.listTitle.title = date + that.areaName + typeObj.listType
      that.commonListTitle = date + that.areaName + typeObj.listType
      that.detailTitle = typeObj.listType
    },
    // 折线图
    hotPiclineFn () {
      let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let type = getHeat.type
      let dataType = 'resultIndexGroupByTime'
      let timeType = 'timeId'
      if (getHeat[dataType]) {
        let maxValueData = common.maxValue(
          getHeat[dataType],
          this,
          'count',
          this.barUnit
        )
        this.lineUnit = maxValueData.unit
        let xData = common.hotPicLineXdata(getHeat[dataType], type, timeType)
        if (xData.days.length > 1) {
          that.isShowLine = true
          this.$nextTick(() => {
            that.$refs.lineDom.xAxisDatas(
              xData.days,
              this.lineTitle,
              maxValueData.yaisData,
              this.areaName,
              maxValueData.unit
            )
            this.$refs.vBarDom.xAxisDatas(
              xData.days,
              this.vBarTitle,
              maxValueData.yaisData,
              this.areaName,
              maxValueData.unit
            )
          })
        } else {
          that.isShowLine = false
        }
      }
    },
    // 横向柱状图
    hotPicBar () {
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let dataType = 'resultIndexListData'
      if (getHeat[dataType]) {
        this.isShowBar = false
        if (this.roleType > 6) {
          this.isShowBar = false
          if (this.heatType !== 2) {
            this.isShowBar = true
          } else {
            if (this.differentiate === 3 || this.differentiate === 4) {
              this.isShowBar = false
            } else {
              this.isShowBar = true
            }
          }
        }
        this.isShowList = !this.isShowBar
        if (this.isShowBar) {
          this.barMoreDataType = dataType
          let backValue = common.barxAxis(
            getHeat[dataType],
            this,
            'name',
            'value',
            this.barUnit
          )
          let YLen = backValue.yaisxData.length
          let XLen = backValue.yaisxData.length
          if (YLen > 6) {
            this.isMore = true
            backValue.yaisxData.splice(6, YLen - 6)
            backValue.xAxisData.splice(6, XLen - 6)
          } else {
            this.isMore = false
          }
          this.$refs.barDom.barData(
            backValue.yaisxData.reverse(),
            backValue.xAxisData.reverse(),
            this.barTitle,
            backValue.unit
          )
        } else {
          // this.commonlistTableTitle = {name: '订单号', value: '促销费'}
          this.listData = getHeat[dataType]
        }
      }
    },

    // 地图
    hotMap (cityName) {
      let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let dataType = 'resultMapData'
      let mapData = {}
      let dataSource = getHeat[dataType]
      if (dataSource) {
        mapData = {
          mapName: cityName,
          data: this.$refs.map.setMap(dataSource),
          type: this.timeType,
          tabName: that.tabName,
          areaType: dataSource.areaType,
          pName: dataSource.parentName
        }
        this.$refs.map.getData(mapData)
      } else {
        mapData = {
          mapName: cityName,
          data: this.$refs.map.setMap({}),
          type: this.timeType,
          tabName: that.tabName
        }
        this.$refs.map.getData(mapData)
      }
    },
    // 饼图
    hotPicPieDatas () {
      let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let showDatas = []
      let dataType = 'resultIndexGroupByRegion'

      if (getHeat[dataType] && getHeat[dataType].length > 0) {
        that.isShowPie = true
        showDatas = common.hotPicPieData(
          getHeat[dataType],
          this,
          'name',
          'value'
        )
        this.showDatas = showDatas
      } else {
        that.isShowPie = false
      }
    },
    // 区域分块饼图
    hotAreaPie () {
      let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let showDatas = []
      let dataType = 'resultIndexGroupByArea'
      let areaData = getHeat[dataType]
      if (areaData && areaData.length > 0) {
        that.isShowAreaPie = true
        that.$nextTick(() => {
          showDatas = common.hotPicPieData(areaData, that, 'name', 'value')
          this.areaPieDomShowData = showDatas
        })
      } else {
        that.isShowAreaPie = false
      }
    },
    // 状态图显示调用方法
    hotState () {
      let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let dataType = 'resultFormData'
      if (this.heatType === 1) {
        if (this.differentiate === 1) {
          dataType = 'resultMemberShipOrderStatus'
        } else {
          dataType = ''
        }
      } else if (this.heatType === 2) {
        if (this.differentiate === 1) {
          dataType = 'resultStatusData'
        } else if (this.differentiate === 2) {
          dataType = 'resultDriverStatusData'
        } else if (this.differentiate === 3) {
          dataType = 'resultLineOrderStatus'
        } else {
          dataType = ''
        }
      } else if (this.heatType === 3) {
        if (this.differentiate === 1) {
          dataType = 'resultHeatOrderGroupByStatus'
        } else {
          dataType = 'resultOrderGroupByPayType'
        }
      } else {
        dataType = 'resultFormData'
      }
      if (getHeat[dataType]) {
        let newData = getHeat[dataType]
        if (this.heatType === 4) {
          let maxValue = that.getMaxValue(newData, that.barUnit)
          this.$refs.stateBarDom.barData(
            maxValue.yaisxData,
            maxValue.series,
            this.stateBarTitle,
            maxValue.lastUnit,
            true,
            maxValue.minInterval
          )
        } else {
          let backValue = common.barxAxis(
            newData,
            this,
            'name',
            'value',
            this.barUnit
          )
          this.$refs.stateBarDom.barData(
            backValue.yaisxData.reverse(),
            backValue.xAxisData.reverse(),
            this.stateBarTitle,
            backValue.unit
          )
        }
      }
    },
    // 使用张数图显示调用方法
    hotCount () {
      let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let dataType = 'resultSalesData'
      let newData = getHeat[dataType]
      if (newData) {
        let maxValue = that.getMaxValue(newData, '张')
        this.$refs.countBarDom.barData(
          maxValue.yaisxData,
          maxValue.series,
          that.countBarTitle,
          maxValue.lastUnit,
          true,
          maxValue.minInterval
        )
      }
    },
    getMaxValue (newData, unit) {
      let that = this
      let series = []
      let yaisxData = []
      let lastUnit = ''
      let yxaisVal = []
      let resXdata = []
      let minInterval = 0
      for (let k in newData) {
        let dataSource = newData[k].data
        for (let i = 0; i < dataSource.length; i++) {
          yxaisVal.push(dataSource[i].value)
          if (dataSource[i].value !== 0) {
            resXdata.push(dataSource[i].value)
          }
        }
      }
      if (resXdata.length === 0) {
        minInterval = 1
      } else {
        minInterval = 0
      }
      let maxValue = Math.max.apply(null, yxaisVal)
      let finnalData
      if (maxValue <= 800) {
        finnalData = 1
        lastUnit = unit
      } else if (maxValue >= 800 && maxValue <= 10000) {
        lastUnit = '千' + unit
        finnalData = 1000
      } else if (maxValue >= 10000) {
        lastUnit = '万' + unit
        finnalData = 10000
      }
      for (let k in newData) {
        let backName = common.barxAxis(
          newData[k].data,
          that,
          'name',
          'value',
          unit
        )
        let barData = newData[k].data
        yaisxData = backName.yaisxData
        if (finnalData !== 1) {
          for (let j = 0; j < barData.length; j++) {
            barData[j].value = (barData[j].value / finnalData).toFixed(2)
          }
        }
        series.push({
          name: newData[k].name,
          type: 'bar',
          barMaxWidth: '10',
          data: barData,
          clickable: false,
          itemStyle: {
            normal: {
            }
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#4fd4f7'
            }
          }
        })
      }
      return {
        yaisxData,
        series,
        lastUnit,
        minInterval
      }
    },
    // 时间段图显示调用方法
    hotTimeBar () {
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let dataType = 'resultHeatOrderGroupByHour'
      let data = getHeat[dataType]
      if (data) {
        let newData = []
        for (let i = 0; i < data.length; i++) {
          if ((i % 2) === 0) {
            newData.push({
              name: data[i + 1].name.split('-')[0] + '-' + data[i].name.split('-')[1],
              value: data[i].value + data[i + 1].value
            })
          }
        }
        let backValue = common.barxAxis(
          newData,
          this,
          'name',
          'value',
          this.barUnit
        )
        this.$refs.timeBarDom.barData(
          backValue.yaisxData,
          backValue.xAxisData,
          this.timeBarTitle,
          backValue.unit
        )
      }
    },
    // 来源图显示调用方法
    hotSource () {
      let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let showDatas = []
      let dataType = 'resultOrderSource'
      if (this.heatType === 1) {
        if (this.differentiate === 1) {
          dataType = 'resultMemberShipOrderSource'
        } else {
          dataType = 'resultOrderSource'
        }
      } else if (this.heatType === 3) {
        if (this.differentiate === 1) {
          dataType = 'resultMemberShipOrderSource'
        } else {
          dataType = 'resultHeatOrderGroupByStatus'
        }
      }
      if (getHeat[dataType]) {
        showDatas = common.hotPicPieData(
          getHeat[dataType],
          that,
          'name',
          'value'
        )
      }
      this.sourcePieDomShowDatas = showDatas
    },
    // 类型图显示调用方法
    hotTpye () {
      // let that = this
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let dataType = 'resultHeatOrderGroupCancelStatus'
      let showDatas = []
      if (this.heatType === 3) {
        if (this.differentiate === 2) {
          dataType = 'resultOrderGroupByPayType'
        } else {
          dataType = 'resultHeatOrderGroupCancelStatus'
        }
      }
      let newData = getHeat[dataType]
      if (newData) {
        if (Array.isArray(newData)) {
          showDatas = newData
        } else {
          showDatas = {
            'k1': newData['allStatusData'],
            'k2': newData['memberStatusData'],
            'k3': newData['driverStatusData']
          }
        }
      }
      this.objShowDatas = showDatas
    },
    toDetail (item) {
      let that = this
      let token = sessionStorage.getItem('token')
      let titleArr = common.detailTitle
      let nameTitle = titleArr[this.detailType]
      let detailUrl = ''
      let params = {token: token}
      if (this.detailType === 1 || this.detailType === 2) {
        detailUrl = '/detail/getDriver'
        params.driverId = item.id
      } else if (this.detailType === 3) {
        detailUrl = '/detail/getLine'
        params.lineId = item.id
      } else if (this.detailType === 4) {
        detailUrl = '/detail/getOrg'
        params.orgId = item.id
      } else {
        detailUrl = '/detail/getOrder'
        params.no = item.name
      }
      that.$api
        .post(detailUrl, qs.stringify(params))
        .then(function (res) {
          if (res.status === 200) {
            let resultData = res.data.resultData
            let detailData = []
            for (let key in nameTitle) {
              detailData.push({
                name: key,
                value: resultData[nameTitle[key]]
              })
            }
            that.detailData = detailData
            that.left = '0%'
          }
        })
    },
    closeDetail () {
      this.left = '100%'
    },
    toListPage () {
      this.leftList = '0%'
    },
    closeList () {
      this.leftList = '100%'
    },
    // 关闭更多
    closeShowMore () {
      this.leftVal = '100%'
    },
    // 关闭详情页
    closeShowListDetail () {
      this.isShowListDetail = false
    },
    // 运营商选择后方法
    operatorReuqest (type, cityName, code, tabName) {
      let that = this
      that.operatorName = tabName
      that.defaultOperator = tabName[tabName.length - 1].regionGroupName
      this.reuqest(type, cityName, code)
    },
    // 城市选择后返回方法
    cityReuqest (type, cityName, code, tabName) {
      let that = this
      that.roleType = tabName[tabName.length - 1].type
      that.changeRoleType()
      if (that.roleType === 8) {
        let nameArr = cityName.split('-')
        cityName = cityName + '(往返)'
        that.changeSelectData = [{
          name: nameArr[0] + '-' + nameArr[1] + '(往返)',
          value: 0
        }, {
          name: nameArr[0] + '-' + nameArr[1],
          value: 1
        }, {
          name: nameArr[1] + '-' + nameArr[0],
          value: 2
        }]
        this.isShowChangeSelect = false
        this.changeNum = 0
        this.lineDirection = 0
        this.isShowBar = false
        this.isShowList = true
      } else if (that.roleType === 9) {
        this.isShowChangeSelect = false
      } else {
        this.isShowChangeSelect = false
      }
      this.reuqest(type, cityName, code, tabName)
    },
    changeRoleType () {
      let that = this
      if (that.heatType === 2) {
        if (that.roleType === 7 || that.roleType === 6) {
          that.content = [
            { name: '车辆', value: 0 },
            { name: '司机', value: 1 },
            { name: '线路', value: 2 }]
          if (that.differentiate === 4) {
            that.url = '/turnover/getCar'
            that.differentiate = 1
            console.log(that.differentiate)
          }
        } else if (that.roleType === 8) {
          that.content = [
            { name: '车辆', value: 0 },
            { name: '司机', value: 1 }]
          if (that.differentiate === 4 || that.differentiate === 3) {
            that.url = '/turnover/getCar'
            that.differentiate = 1
          }
        } else if (that.roleType === 9) {
          that.content = [
            { name: '车辆', value: 0 }]
          if (that.differentiate !== 1) {
            that.url = '/turnover/getCar'
            that.differentiate = 1
          }
        } else {
          that.content = [
            { name: '车辆', value: 0 },
            { name: '司机', value: 1 },
            { name: '线路', value: 2 },
            { name: '运营商', value: 3 }
          ]
        }
      }
    },
    // 请求方法url
    reuqest (type, cityName, code, tabName) {
      var that = this
      let token = sessionStorage.getItem('token')
      let userName = sessionStorage.getItem('userName')

      that.timeType = type
      that.areaName = cityName || that.areaName
      that.defaultCity = that.areaName
      if (code || code === null) {
        that.codes = code
      }
      if (tabName) {
        that.tabName = tabName
      }

      that.changeTitle()
      if (type === 1 || type === 5) {
        that.$refs.queryDateDom.changeNumVal(0)
      }
      that.isShowMask = true
      that.$api
        .post(that.url, qs.stringify({
          token: token,
          biRegionIds: that.codes,
          userName: userName,
          type: type,
          level: that.roleType,
          startDate: that.startDate,
          endDate: that.endDate,
          lineDirection: this.lineDirection
        }))
        .then(function (res) {
          if (res.data.error === 0) {
            let data = JSON.stringify(res.data.resultData)
            sessionStorage.setItem('hot', data)
            that.totalCountShow(res.data.resultData)
            that.dataUser(that.areaName)
            that.isShowMask = false
          }
        })
    },
    // 判断权限显示
    dataUser (cityName) {
      if (this.isShowCountBar) {
        this.$nextTick(() => {
          this.hotCount()
        })
      }
      if (this.isShowStateBar) {
        this.$nextTick(() => {
          this.hotState()
        })
      }
      if (this.isShowSourcePie) {
        this.$nextTick(() => {
          this.hotSource()
        })
      }
      if (this.isShowTypePie) {
        this.$nextTick(() => {
          this.hotTpye()
        })
      }
      if (this.isShowTimeBar) {
        this.$nextTick(() => {
          this.hotTimeBar()
        })
      }
      this.hotPicBar()
      this.hotPicPieDatas()
      this.hotAreaPie()
      this.hotPiclineFn()
      this.hotMap(cityName)
    },
    // 自定义时间查询
    confirmQuery (bengin, end) {
      let that = this
      if (bengin === '') {
        this.startDate = this.endDate = end
      } else if (end === '') {
        this.startDate = this.endDate = bengin
      } else {
        this.startDate = bengin
        this.endDate = end
      }
      if (this.startDate === this.endDate) {
        this.rangeDate = this.startDate
      } else {
        this.rangeDate = this.startDate + ' 至 ' + this.endDate
      }
      that.$refs.queryDateDom.changeNumVal(-1)
      this.timeType = -1
      this.reuqest(0)
    },
    // 格式化时间
    formatDate () {
      let now = new Date()
      let yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
      let mon = yesterday.getMonth() + 1
      let day = yesterday.getDate()
      if (mon < 10) {
        mon = '0' + mon
      }
      if (day < 10) {
        day = '0' + day
      }
      return mon + '月' + day + '日'
    },
    // 判断主屏滚动位置
    handleScroll () {
      let scrollTop = document.getElementById('app').scrollTop
      if (scrollTop >= 270) {
        this.isfixedClass = 'query-box-fixed'
      } else {
        this.isfixedClass = ''
      }
    },
    // 总数，环比，显示
    totalCountShow (data) {
      let that = this
      let allAmount = data.navigationColumn ? data.navigationColumn : {}
      // let totalObj = {}
      if (that.isRunningWater) {
        this.totalObj = {
          leftTitle: that.leftTitle,
          rightTitle: that.rightTitle,
          allLeftTitle: that.allLeftTitle,
          allRightTitle: that.allRightTitle,
          allAmountWater: (allAmount.totalCount ? allAmount.totalCount : 0),
          amountWater: allAmount.timeCount ? allAmount.timeCount : 0,
          orderPriorPeriod: allAmount.ringRatioCount ? allAmount.ringRatioCount : 0,
          allAmountReceivable: allAmount.receivableTotalCount ? allAmount.receivableTotalCount : 0,
          amountReceivable: allAmount.receivableTimeCount ? allAmount.receivableTimeCount : 0,
          receivedPriorPeriod: allAmount.receivableRingRatioCount ? allAmount.receivableRingRatioCount : 0,
          unit: that.barUnit
        }
      } else {
        this.totalObj = {
          leftTitle: that.allLeftTitle,
          rightTitle: that.leftTitle,
          allAmount: allAmount.totalCount ? allAmount.totalCount : 0,
          amount: allAmount.timeCount ? allAmount.timeCount : 0,
          priorPeriod: allAmount.ringRatioCount ? allAmount.ringRatioCount : 0,
          unit: that.barUnit
        }
      }
    },
    // 显示更多城市
    cityShowMore () {
      let getHeat = JSON.parse(sessionStorage.getItem('hot'))
      let ciytbackValue = common.barxAxis(
        getHeat[this.barMoreDataType],
        this,
        'name',
        'value',
        this.barUnit
      )
      let yData = ciytbackValue.yaisxData
      let xData = ciytbackValue.xAxisData
      let showMoreData = {
        yaisxData: yData.reverse(),
        xAxisData: xData.reverse(),
        barTitle: this.barTitle,
        unit: ciytbackValue.unit
      }
      this.moreTitle = this.barTitle
      this.leftVal = '0%'
      this.$refs.shoeMoreBox.showMore(showMoreData)
    },
    // 初始化console.log(
    init () {
      let that = this
      let getRole = JSON.parse(sessionStorage.getItem('getRole'))
      this.areaName = getRole.areaName
      this.codes = getRole.code
      this.roleType = getRole.areaType
      this.tabName[0] = {
        'name': getRole.areaName,
        'code': getRole.code,
        'type': getRole.areaType
      }
      if (getRole.areaType === 8) {
        let areaArr = getRole.areaName.split('-')
        this.areaName = this.areaName + '(往返)'
        that.changeSelectData = [{
          name: areaArr[0] + '-' + areaArr[1] + '(往返)',
          value: 0
        }, {
          name: areaArr[0] + '-' + areaArr[1],
          value: 1
        }, {
          name: areaArr[1] + '-' + areaArr[0],
          value: 2
        }]
        this.isShowChangeSelect = true
        this.changeNum = 0
        this.lineDirection = 0
      }
      this.typeOrder(0)
    }
  }
}
</script>
<style lang="scss" scoped>
$f_color: #138cef;
.hot-pic-passenger {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 1rem;
  position: relative;
  .map-box {
    position: relative;
    width: 100%;
    margin-top: 0.3rem;
    .hot-pic-query {
      position: absolute;
      z-index: 2;
      top: 65%;
      left: -5%;
      width: 31%;
      ul {
        li {
          p {
            &:nth-child(1) {
              font-size: 0.24rem;
              color: $f_color;
              width: 66%;
              text-align: right;
            }
          }
        }
      }
    }
  }
  .query-box-fixed{
    position: fixed;
    top:.7rem;
    left:0;
    z-index: 100;
    width: 100%;
    padding:0 .2rem;
    background: #081E4B;
  }
  .query-calendar{
    margin-top: .08rem;
    height: .7rem;
    line-height: .7rem;
  }
  .date-box {
    margin-top: .02rem;
    .query-date {
      background: none !important;
    }
  }
}

.container {
  position: relative;
}
</style>
